<template>
    <div>
        <el-card style="border:none !important;border-radius: 12px;box-shadow:none !important">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">个人中心</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <a href="/">账户管理</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>账户余额</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="tab-nav-bd">
                <span class="title">账户余额</span>
            </div>
        </el-card>
        <div style="margin-top: 20px;">
            <el-card style="border:none !important;border-radius: 12px;box-shadow:none !important">
                <div style="    height: 70px;
    font-size: 16px;
    white-space: nowrap;
    display: flex;
    justify-content: flex-start;
    align-items: center;">状态:<el-radio-group v-model="radio1" size="size" style="margin-left: 15px;">
                        <el-radio-button label="全部" value="New York" />
                        <el-radio-button label="已完成" value="Washington" />
                        <el-radio-button label="待支付" value="Los Angeles" />
                        <el-radio-button label="已取消" value="Chicago" />
                    </el-radio-group></div>
                <el-table :data="tableData" style="width: 100%" stripe>
                    <el-table-column prop="id" label="ID" />
                    <el-table-column prop="order_id" label="订单号" />
                    <el-table-column prop="date" label="时间" />
                    <el-table-column prop="type" label="类型" />
                    <el-table-column prop="before" label="交易内容" />
                    <el-table-column prop="money" label="实付金额" />
                    <el-table-column prop="after" label="状态" />
   
                </el-table>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup>

import { ref } from 'vue'

const radio1 = ref('New York')
const tableData = [
    {
        id: 1,
        type: '加购套包下载币充值',
        order_id: '1234567890',
        before: '1000下载币',
        money: '0.00元',
        after: '已取消',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '加购套包下载币充值',
        order_id: '1234567890',
        before: '1000下载币',
        money: '0.00元',
        after: '已取消',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '加购套包下载币充值',
        order_id: '1234567890',
        before: '1000下载币',
        money: '0.00元',
        after: '已取消',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '加购套包下载币充值',
        order_id: '1234567890',
        before: '1000下载币',
        money: '0.00元',
        after: '已取消',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '加购套包下载币充值',
        order_id: '1234567890',
        before: '1000下载币',
        money: '0.00元',
        after: '已取消',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '加购套包下载币充值',
        order_id: '1234567890',
        before: '1000下载币',
        money: '0.00元',
        after: '已取消',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '加购套包下载币充值',
        order_id: '1234567890',
        before: '1000下载币',
        money: '0.00元',
        after: '已取消',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '加购套包下载币充值',
        order_id: '1234567890',
        before: '1000下载币',
        money: '0.00元',
        after: '已取消',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '加购套包下载币充值',
        order_id: '1234567890',
        before: '1000下载币',
        money: '0.00元',
        after: '已取消',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '加购套包下载币充值',
        order_id: '1234567890',
        before: '1000下载币',
        money: '0.00元',
        after: '已取消',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '加购套包下载币充值',
        order_id: '1234567890',
        before: '1000下载币',
        money: '0.00元',
        after: '已取消',
        date: '2024-10-01',
    },
    {
        id: 1,
        type: '加购套包下载币充值',
        order_id: '1234567890',
        before: '1000下载币',
        money: '0.00元',
        after: '已取消',
        date: '2024-10-01',
    },
]
</script>
<style scoped>
.tab-nav-bd {
    margin-top: 16px;
}

.tab-nav-bd .title {
    font-size: 18px;
    font-weight: 700;
    color: #1D2129;
    line-height: 26px;
}
</style>